<template>
  <div class="app-views">
    <div class="item-box" v-loading="loading" style="border-right: 1px dashed #e6e6e6">
      <div class="sub-title">
        <i class="iconfont icon-list" style="margin-right: 5px; font-weight: bold"></i>
        <div class="Title">设备列表</div>
      </div>
      <div class="device-list">
        <DCard :dName="item.label" :isCheck="isCheckCard == item.value" @click.native="handlerisCheck(item)"
          v-for="(item, index) in componentConfig.data" :key="index" :status="deviceList[index]"
          :use="Array.isArray(componentConfig.deviceStatusValue) ? componentConfig.deviceStatusValue[index] : componentConfig.deviceStatusValue" />
      </div>
    </div>
    <div class="device-views">
      <div class="sub-title">
        <i class="iconfont icon-shebeituceng-" style="margin-right: 5px"></i>
        <div class="Title">设备图</div>
      </div>
      <div class="device-img">
        <div class="device-img-rec">
          <div class="device-no-subCard">
            <div class="img-box">
              <img :src="checkData.deviceImg" alt=""
                :style="{ width: componentConfig.imgs[0], height: componentConfig.imgs[1] }" />
              <Client v-if="componentConfig.isCamera" :isPhoto="true" :left="checkData.cameraInfo.left"
                :top="checkData.cameraInfo.top" :PostionNumber="checkData.cameraInfo.PostionNumber" />
            </div>
            <div class="deviceStatus">
              <div class="title">
                设备状态
                <i v-for="item in iconList" :key="item" :class="item" @click="openParamSet"
                  v-hasPermi="['assembly:device:edit']"></i>
              </div>
              <div class="list" v-loading="componentConfig.isDeviceStatus && showDeviceStatus.length == 0">
                <div class="item" v-for="item in showDeviceStatus" :key="item.id">
                  <div class="circle">
                    <div :class="item | devicePlcStatus"></div>
                  </div>
                  <div class="descript">{{ item.note }}{{ item.message }}</div>
                </div>
              </div>
              <div class="empty_text" v-if="showDeviceStatus.length == 0">
                无信号
              </div>
            </div>
          </div>
          <div class="deviceCard" v-if="componentConfig.isSubTitle">
            <div class="item" v-for="(item, index) in device.deviceValue" :key="index"
              :style="{ backgroundColor: colorList[index] }" :class="subClickCard == index ? 'redBorder' : ''"
              @click="handlerswitch(index)">
              {{ item }}
            </div>
          </div>
        </div>
        <div class="signal">
          <div class="sub-title">
            <i class="iconfont icon-PLCxinhaoganzhizhongduan" style="margin-right: 5px"></i>
            <div class="Title">信号列表</div>
          </div>
          <div class="signal-table" v-if="componentConfig.isDictSignal">
            <el-table :data="tableData" style="width: 100%" max-height="260">
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="cmd" label="指令内容" width="200" show-overflow-tooltip />
              <el-table-column prop="cmdType" label="命今类型" show-overflow-tooltip />
              <el-table-column prop="createTime" label="时间" width="150">
                <template slot-scope="scope">
                  {{ scope.row.createTime.substr(10) }}
                </template>
              </el-table-column>
              <el-table-column label="完成状态" width="100">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.state | tagType">{{
                    scope.row.state | status
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button icon="el-icon-close" type="text" v-if="!scope.row.state"
                    v-hasPermi="['assembly:device:edit']" @click="handlerCmd('fallbackAction', scope.row)">取消</el-button>
                  <el-button icon="el-icon-check" type="text" v-hasPermi="['assembly:device:edit']"
                    v-if="!scope.row.state" @click="handlerCmd('executionCompleted', scope.row)">完成</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="signal-empty" v-else>
            <i class="iconfont icon-jinyong" style="marginright: 5px; fontsize: 30px"></i>
            该设备无plc信号
          </div>
        </div>
      </div>
    </div>
    <div class="item-box">
      <LogView :jobGroup="componentConfig.jobGroup" :isShow="isShow" />
    </div>
    <div v-for="item in checkData.param" :key="item.label">
      <el-drawer title="设备参数" :visible.sync="drawer" :direction="direction">
        <div class="params" v-if="deviceParams != null" v-loading="loadDeviceParam">
          <div class="param_item_W" v-for="child in item.editParams" :key="child.key">
            <div class="paramsName">{{ child.label }}</div>
            <!-- 开关类型 -->
            <div class="paramView" v-if="child.type == 'switch'">
              <el-switch v-model="deviceParams.object[child.key]" active-color="#13ce66" inactive-color="#ffff00">
              </el-switch>
            </div>
            <!-- 多选类型 -->
            <div class="paramView" v-if="child.type == 'checkbox-group'">
              <el-checkbox-group v-model="deviceParams.object[child.key]">
                <el-checkbox :label="box.value" :disabled="box.disabled" v-for="box in child.groupList"
                  :key="box.value">{{ box.label }}</el-checkbox>
              </el-checkbox-group>
            </div>
            <!-- 值类型 -->
            <div class="paramView" v-if="child.type == 'input'">
              <span v-show="params[child.key]" @click.stop="handlerSpace(child.key)">{{ deviceParams.object[child.key]
              }}</span>
              <el-input-number v-show="!params[child.key]" size="mini" :ref="child.key"
                v-model="deviceParams.object[child.key]" @blur="handlerSpace(child.key)"></el-input-number>
            </div>
            <!-- 单选类型 -->
            <div class="paramView" v-if="child.type == 'radio'">
              <el-radio-group v-model="deviceParams.object[child.key]">
                <el-radio :label="box.value" :disabled="box.disabled" v-for="box in child.groupList" :key="box.value">{{
                  box.label }}</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="footer">
            <el-button @click="drawer = false">取消</el-button>
            <el-button type="primary" @click="handlerEditDevice">确定</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import DCard from "@/views/components/production/dCard.vue";
import LogView from "@/views/components/production/logViews.vue";
import { edgeList } from "../Config/label";
import mixin from "../mixin/index";
import { mapState } from "vuex";
import { deviceEditParam } from "@/api/assembly/device";
import Client from "@/views/production/device/components/client.vue";
export default {
  components: {
    DCard,
    LogView,
    Client,
  },
  mixins: [mixin],
  props: {
    componentConfig: {
      type: Object,
      default: () => {
        return {};
      },
      require: true,
    },
  },
  data() {
    return {
      edgeList,
      isCheckCard: 0,
      data: [],
      jobGroup: 0,
      loading: false,
      isShow: false,
      tableData: [],
      device: null,
      loadDeviceParam: true,
      direction: "rtl",
      drawer: false,
      deviceParams: null,
      delayTime: true,
      addThick: true,
      params: {},
      colorList: ["#23a8f2", "#0082fc", "#299b48", "#ce9178", "#da64a0"],
      subClickCard: 0,
    };
  },
  methods: {
    handlerswitch(index) {
      this.subClickCard = index;
      this.componentConfig.isDeviceStatus&&this.getDeviceSignal();
    },
    handlerSpace(e) {
      this.params[e] = !this.params[e];
      this.$nextTick(() => {
        !this.params[e] && this.$refs[e][0].focus();
      });
    },
    handlerThick() {
      this.addThick = !this.addThick;
      this.$nextTick(() => {
        !this.addThick && this.$refs.addThick.focus();
      });
    },
    openParamSet() {
      this.drawer = true;
      this.initData();
    },
    // index 选中的card
    handlerisCheck(item) {
      this.isCheckCard = item.value;
      this.subClickCard = 0;
      this.device = item;
      this.componentConfig.isDeviceStatus&&this.getDeviceSignal();
    },
    async initData() {
      this.loadDeviceParam = true;
      let paramList = this.componentConfig.data.map((item) => {
        return {
          name: item.deviceType,
          id: item.id,
        };
      });
      await this.$store.dispatch("getDeviceMap", paramList);
      this.deviceParams =
        this.deviceParamsList.length == 0
          ? []
          : this.deviceParamsList[this.isCheckCard];
      this.loadDeviceParam = false;
    },
    handlerEditDevice() {
      this.$prompt("请输入密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^8863$/,
        inputErrorMessage: "密码错误",
      })
        .then(({ value }) => {
          deviceEditParam(this.deviceParams).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改设备状态成功");
              this.drawer = false;
              this.initData();
            } else {
              this.$message.error("修改设备状态失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    setValueToData() {
      this.checkData.param.forEach((item) => {
        item.editParams.forEach((item) => {
          if (item.type == "input") {
            this.$set(this.params, item.key, true);
          }
        });
      });
    },
  },
  created() {
    this.device = this.checkData;
    this.componentConfig.isDeviceStatus ? this.getSignal(this.dbList) : this.$store.dispatch("clearDeviceList");
    this.setValueToData();
  },
  destroyed() { },
  computed: {
    ...mapState({
      deviceParamsList: (state) => state.deviceStatus.deviceParams,
    }),
    showDeviceStatus() {
      if (this.deviceList.length == 0) return [];
      let blockAddr = this.componentConfig.dbKey;
      let deviceBlock = this.checkData.db.block;
      return this.deviceList[this.isCheckCard].plcSignals.filter((item) => {
        return Array.isArray(blockAddr[this.isCheckCard])
          ? blockAddr[this.isCheckCard].includes(item.addr)
          : item.block == deviceBlock && blockAddr.includes(item.addr);
      });
    },
    checkData() {
      return this.componentConfig.data[this.isCheckCard];
    },
    dbList() {
      return this.componentConfig.data.map((item) => {
        return item.db;
      });
    },
    iconList() {
      return this.componentConfig.data[this.isCheckCard].param.map((item) => {
        return item.icon;
      });
    },
  },
  filters: {
    devicePlcStatus(arg) {
      let arr1 = [16];
      let arr2 = [0, 4, 8];
      let arr3 = [20, 32, 72];

      let arr = ["circle-stop", "circle-forbid", "circle-active"];

      if (arg.message == -1) return arr[0];
      if (arr1.includes(arg.addr)) {
        if (arg.message == 0) return arr[2];
        if (arg.message == 1) return arr[1];
        if (arg.message == 2) return arr[2];
      }
      if (arr2.includes(arg.addr)) {
        if (arg.message == 0) return arr[1];
        if (arg.message == 1) return arr[2];
      }
      if (arr3.includes(arg.addr)) {
        if (arg.message == 0) return arr[1];
        if (arg.message == 1) return arr[1];
        if (arg.message == 2) return arr[2];
      }

      let a = [216, 272, 328, 384];
      let b = [218, 274, 330, 386];
      let c = [248, 304, 360, 416];
      if (a.includes(arg.addr)) {
        if (arg.message == 1) return arr[2];
      }
      if (b.includes(arg.addr)) {
        if (arg.message == 0) return arr[1];
      }
      if (c.includes(arg.addr)) {
        if (arg.message == 0) return arr[0];
        if (arg.message == 1) return arr[1];
        if (arg.message == 2) return arr[2];
      }
    },
  },
};
</script>

<style  lang="less" scoped>
/deep/ .el-drawer__header {
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 7%);
  margin-bottom: 0px;
  padding-bottom: 20px;
  background-color: #f1f3f4;
  font-weight: bold;
  font-size: 17px;
}

.app-views {
  width: 100%;
  height: 810px !important;
  display: flex;
  flex-wrap: nowrap;
  border: 1px dashed #e6e6e6;
  border-top: none;

  .param_item_W {
    display: flex;
    flex-direction: row;
  }

  .params {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 10px;

    .paramsName {
      min-height: 40px;
      padding: 0px 10px;
      display: flex;
      align-items: center;
      font-size: 16px;
    }

    .paramView {
      min-height: 40px;
      display: flex;
      align-items: center;
      padding: 0px 10px;
      margin-left: auto;
    }
  }

  .footer {
    width: 100%;
    margin-top: auto;
    padding: 10px 5px;

    /deep/.el-button {
      width: 49%;
    }
  }
}

.item-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.sub-title {
  width: 100%;
  height: 48px;
  padding: 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px dashed #e6e6e6;

  .Title {
    width: 80%;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    color: #303133;

    .icon {
      width: 50px;
      height: 100%;
      margin-left: auto;
      margin-right: 10px;
      cursor: pointer;
      display: flex;
      justify-content: center;
    }
  }

  .glass-number {
    height: 100%;
    margin-left: auto;
    font-size: 14px;
    display: flex;
    align-items: flex-end;
    cursor: pointer;

    .number {
      font-size: 18px;
      font-weight: bold;
      transform: translateY(2px);
      margin-left: 10px;
    }

    .number:hover {
      text-decoration: underline;
    }
  }
}

.empty_text {
  min-height: 100px;
  margin-top: 10px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  color:#e7e7e7
}

.deviceCard {
  border-top: 1px dashed #e6e6e6;
  width: 100%;
  height: 20%;
  padding: 10px;
  display: flex;
  justify-content: space-around;

  .item {
    width: calc(25% - 20px);
    font-size: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    margin-left: 5px;
    cursor: pointer;
  }

  .redBorder {
    border: 3px solid red;
  }
}

.device-list,
.device-action,
.log-content {
  flex: 1;
  padding: 10px 10px;
  overflow: auto;
}

.log-content {
  display: flex;
  flex-direction: column;

  .item {
    height: 40px;
    display: flex;
    flex-direction: column;

    .content {
      font-size: 14px;
      color: red;
    }
  }
}

.device-views {
  width: 60%;
  max-height: 100%;
  display: flex;
  flex-direction: column;

  .device-img {
    flex: 1;
    max-height: 100%;
    display: flex;
    flex-direction: column;

    .device-img-rec {
      position: relative;
      min-height: 60%;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-bottom: 1px dashed #e6e6e6;

      .title {
        font-size: 17px;
        font-weight: bold;
        padding-bottom: 5px;
        margin-bottom: 5px;
        border-bottom: 1px dashed #e6e6e6;
        display: flex;

        i {
          margin-left: auto;
          color: #409eff;
          transform: translateY(2px);
        }

        i:hover {
          cursor: pointer;
          text-decoration: underline;
        }
      }

      .device-no-subCard {
        width: 100%;
        flex: 1;
        display: flex;
      }

      .img-box {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 420px;
          height: 440px;
        }
      }

      .deviceStatus {
        padding: 10px;
        width: 220px;
        height: 100%;
        border-left: 1px solid #e6e6e6;
        background-color: #fff;

        .list {
          min-height: 100px;
          margin-top: 10px;
        }

        .item {
          display: flex;
          margin-bottom: 15px;

          .circle {
            border-radius: 50%;
            min-width: 20px;
            height: 20px;
            border: 1px solid #e2e4ea;
            padding: 2px;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, 5%);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .descript {
            font-size: 14px;
            color: gray;
            margin-left: 10px;
          }

          .circle-active {
            min-width: 16px;
            height: 16px;
            background-color: #23d96e;
            border-radius: 50%;
          }

          .circle-forbid {
            min-width: 16px;
            height: 16px;
            background-color: yellow;
            border-radius: 50%;
          }

          .circle-stop {
            min-width: 16px;
            height: 16px;
            background-color: red;
            border-radius: 50%;
          }
        }
      }
    }
  }
}

.signal {
  flex: 1;
  overflow: hidden;

  .signal-empty {
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #e6e6e6;
  }
}
</style>
